<template>
  <div class="law">
    <h7>政法编制</h7>
    <ul class="zhis">
      <li>
        <p>核定数</p>
        <p @click="zfzxjgbzs()">{{ hds+dfps }}</p>
      </li>
      <li>
        <p>实有数</p>
        <p @click="zfzxjgzzs()">{{ sys }}</p>
      </li>
      <li>
        <p>待分配数</p>
        <p @click="zfzxjgdfps()">{{ dfps }}</p>
      </li>
    </ul>
  </div>
  <el-dialog
  :draggable="true"
    :title="Title"
    v-model="dialogVisible"
    width="50%"
    destroy-on-close
  >
    <!-- <div class="mg-chart" ref="mgcharts"></div> -->
    <ZfzxjgBzsChild
      :depCode="depCode"
      :type="type"
    ></ZfzxjgBzsChild>
  </el-dialog>
  
  <el-dialog
  :draggable="true"
    :title="Title2"
    v-model="dialogVisible2"
    width="50%"
    destroy-on-close
  >
    <!-- <div class="mg-chart" ref="mgcharts"></div> -->
    <ZfzxjgBzsChildDfp
      :depCode="depCode"
    ></ZfzxjgBzsChildDfp>
  </el-dialog>
</template>

<script>
import Sever from "@/api/selfApi";
import ZfzxjgBzsChild from "@/components/home/ZfzxjgBzsChild.vue";
import ZfzxjgBzsChildDfp from "@/components/home/ZfzxjgBzsChildDfp.vue";
export default {
  name: "HomeRightXzjgBzs",
  components:{
	  Sever,
	  ZfzxjgBzsChild,
	  ZfzxjgBzsChildDfp
	  
  },
  data() {
    return {
		depCode:"36%",
		type:"",
		Title: "",
		Title2: "",
		dialogVisible: false,
		dialogVisible2:false,
      hds: 0,
      sys: 0,
      dfps: 0,
    };
  },
  mounted() {
    this.refreshData("36%");
  },
  computed: {
    changeData() {
      return this.$store.state.depCode;
    },
  },
  watch: {
    changeData: {
      handler(newV) {
        this.refreshData(newV);
		this.depCode=newV;
      },
    },
  },
  methods: {
    async refreshData(depCode) {
      await Sever.smz
        .getBzqk({ depCode: depCode })
        .then((res) => {
          if (res.code == 1) {
            this.hds = res.data.zfBz;
            this.sys = res.data.zfZz;
            this.dfps = res.data.zfDfp;
          } else {
            console.log("bzqk请求错误！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
	zfzxjgbzs() {
		this.type="zfbz";
		this.Title="政法专项编制核定数详情(其中含待分配数"+this.dfps+"个)"
	  this.dialogVisible = true;
	},
	
	
	zfzxjgzzs() {
		this.type="zfzz";
		this.Title="政法专项编制实有数详情"
	  this.dialogVisible = true;
	},
	
	zfzxjgdfps() {
		this.Title2="政法专项编制待分配数详情"
	  this.dialogVisible2 = true;
	},
  },
};
</script>